<template>
    <div style="padding: 20px;">
        <h1>{{ lessonPlan.lplanName }}</h1>
        <mavon-editor ref='md' @imgAdd="$imgAdd" v-model="lessonPlan.lplanMain" style="height: 80vh"
            @save="updateLessonPlan">
        </mavon-editor>
    </div>
</template>

<script>
import {
    getTecherLessonPlan, updateTecherLessonPlan
} from "@/api/TecherLessonPlan/TecherLessonPlan";
import axios from 'axios'
import { getToken } from "@/utils/auth";
export default {
    data() {
        return {
            markdownOption: {}, // 配置mavon-editor工具栏
            lessonPlan: {},
            fileSize: 5,
            headers: {
                Authorization: "Bearer " + getToken()
            },
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadOss", // 上传的图片服务器地址
        };
    },
    created() {
        const lessonPlanId = this.$route.params && this.$route.params.lessonPlanId;
        this.getLessonPlanById(lessonPlanId)
    },
    methods: {
        getLessonPlanById(lessonPlanId) {
            getTecherLessonPlan(lessonPlanId).then(res => {
                this.lessonPlan = res.data
            })
        },
        updateLessonPlan() {
            updateTecherLessonPlan(this.lessonPlan).then(res => {
                if (res.code == 200) {
                    this.$message.success("更新成功")
                }
            })
        },
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // 校检文件大小
            if (this.fileSize) {
                const isLt = file.size / 1024 / 1024 < this.fileSize;
                if (!isLt) {
                    this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
                    return false;
                }
            }
            return true;
        },
        // 绑定@imgAdd event
        $imgAdd(pos, $file) {
            // 第一步.将图片上传到服务器.
            var formdata = new FormData();
            formdata.append('file', $file);

            console.log($file);
            axios({
                url: this.uploadUrl,
                method: 'post',
                data: formdata,
                headers: this.headers
            }).then((res) => {
                this.$refs.md.$img2Url(pos, res.data.url)
            })
        }
    }
};
</script>

<style scoped></style>
